<template>
  <view class="page">

    <custom-navigation :title="'选择会员'" rightImg="/static/add.png" @rightAction="$navigateTo('/pages/vip/vip-add')">
    </custom-navigation>

    <view class="flex-row-center"
      style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-right: 24rpx;padding-bottom: 22rpx;">
      <view class="search-box flex-row-center">
        <image src="/static/search.png"></image>
        <input placeholder="请输入会员手机号/姓名" placeholder-style="color:#999999" v-model="searchStr" @confirm="doSearch"
          confirm-type="search" type="text" @keydown.enter="doSearch" />
        <!-- <image src="../../static/qrcode.png" class="qrimag" @click.stop="qrcodeSearch"></image> -->
      </view>
      <!-- 			<view class="fliter-box" @click="showPicker=true">
				<image src="/static/filter.png"></image>
				<text>筛选</text>
			</view> -->
    </view>

    <scroll-view class="body-scroll" scroll-y="true" @scrolltolower="loadMoreData">
      <u-checkbox-group @change="checkboxGroupChange">
        <view class="item-view flex-row-center" v-for="(item,index) in datas" @click="ontap(item,index)">
          <u-checkbox v-model="item.checked" :name="item.member_phone" :disabled="!item.checked&&phones.length>=10">
          </u-checkbox>
          <image :src="item.head_images||'/static/default_head.png'" class="head-img"></image>
          <view class="flex-column" style="margin-left: 40rpx; flex: 1;">
            <view class="flex-row-center">
              <view class="name">{{item.member_name}}</view>
              <view :class="item.member_state=='生效'?'state':'unstate'">{{item.member_state=="生效"?'已激活':'禁用'}}
              </view>
            </view>
            <view class="flex-row-center" style="margin-top: 8rpx;">
              <view class="phone">{{item.openEye?item.member_phone:item.hide_member_phone}}</view>
              <image :src="item.openEye?'/static/open_eye.png':'/static/clonse_eye.png'" class="eye"
                @click.stop="itemOpenEye(item)"></image>
            </view>
            <view class="flex-row-center" style="margin-top: 10rpx;">
              <view class="amount">余额￥{{item.balance}}</view>
              <view class="integral">积分{{item.integral}}</view>
            </view>
          </view>

          <image src="../../static/arrow-blackmin.png" class="arror-right"></image>

        </view>
      </u-checkbox-group>
    </scroll-view>
    <view class="bottom-box">
      <view class="label">
        已选：{{phones.length||0}}
      </view>
      <view class="bg-green" @click="toSend">
        去发送短信
      </view>
    </view>

  </view>
</template>

<script>
  import {
    apiPost
  } from '@/common/api/api.js'
  import dsBridge from 'dsbridge'
  export default {
    data() {
      return {
        datas: [],
        page: 1,
        searchStr: '',
        isRecharge: false,
        isSelect: false,
        phones: [],
        showPwdDialog: false,
        vipPwd: ""
      }

    },
    onLoad(options) {
      this.isRecharge = options?.isRecharge ?? false
      this.isSelect = options?.isSelect ?? false
      this.getData()
    },
    onShow() {
      if (uni.getStorageSync("refresh")) {
        uni.setStorageSync("refresh", null)
        this.page = 1;
        this.getData()

      }
    },
    methods: {
      ontap(item, index) {
        if (!item.checked && this.phones.length > 10) {
          uni.showToast({
            title: '每次发送最高上限十位会员!',
            icon: 'none'
          })
        }
      },
     
      toSend() {
        if (this.phones.length > 0) {
          // if (this.phones.length > 1) {
          //   this.showPwdDialog = true
          // } else {
            uni.navigateTo({
              url: `/pages/vip/send-msg?mobiles=${this.phones.toString()}`
            })
          // }
        }else{
          uni.showToast({
            title:'请选择要发送短信的会员',
            icon:"none"
          })
        }
      },
      checkboxGroupChange(e) {
        this.phones = e
        if(this.phones.length==10){
          uni.showToast({
            title: '每次发送最高上限十位会员!',
            icon: 'none'
          })
        }
      },
      qrcodeSearch() {
        let ths = this;
        dsBridge.call("QRCode", {}, function(res) {
          if (res) {
            ths.searchStr = res
            ths.page = 1
            ths.getData()
          }
        })
      },

      itemOpenEye(item) {
        item.openEye = !(item.openEye ?? false)
        this.$forceUpdate()
      },
      itemOnClick(item) {
        if (this.isSelect) {
          dsBridge.call("JsCallBack", {
            "action": "vip-list",
            "data": item
          }, function(res) {

          })
          uni.setStorageSync("vip-list", [item])
          uni.navigateBack()
          return;
        }

        if (this.isRecharge) {
          let info = JSON.stringify(item)
          uni.setStorageSync("vip-user", info)
          this.$navigateTo('/pages/vip/recharge')
        } else
          this.$navigateTo('/pages/vip/vip-detail?id=' + item.id)
      },
      doSearch() {
        this.page = 1;
        this.getData()
      },
      loadMoreData() {
        this.page++;
        this.getData()
      },
      getData() {
        let relation_condition = {};

        if (this.searchStr.length > 0) {
          relation_condition = {
            "data": [{
              "relation": "OR",
              "data": [{
                "colName": "member_name",
                "ruleType": "[like]",
                "value": this.searchStr
              }, {
                "colName": "member_phone",
                "ruleType": "[like]",
                "value": this.searchStr
              }]
            }],
            "relation": "AND"
          }
        }
        uni.showLoading({
          title: "加载中..."
        })


        this.$apiPost("/retail/select/srvretail_member_info_noencryption_select", {
          "serviceName": "srvretail_member_info_noencryption_select",
          "colNames": ["*"],
          "condition": [],
          "relation_condition": relation_condition,
          "page": {
            "rownumber": 20,
            "pageNo": this.page
          }
        }).then(res => {
          var token = dsBridge.call("getToken");
          if (token == '' || token == undefined) {
            token = uni.getStorageSync("token") ?? ''
          }
          if (res.data != null && res.data.length > 0) {
            for (let i in res.data) {
              let item = res.data[i]
              if (item.head_portrait) {
                if (item.head_portrait.length > 20)
                  item.head_images = item.head_portrait;
                else
                  item.head_images =
                  `http://139.196.209.46:4882/file/download?fileNo=${item.head_portrait}&bx_auth_ticket=${token}`

              }
              if (item.member_phone?.length == 11) {
                let s = "" + item.member_phone;
                let sli = s.split("");
                sli.splice(4, 4, "***");
                item.hide_member_phone = sli.join("")
              }
            }
          }

          if (this.page == 1)
            this.datas = res.data;
          else {
            if (res.data.length == 0) {
              uni.showToast({
                title: "没有更多数据了。",
                icon: 'none'
              })
            }
            this.datas.push(...res.data)
          }

          uni.hideLoading()
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

  .placeholder {
    font-size: 14px;
    color: #999;
    padding: 0 5px;
  }

  .bottom-box {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    border-top: 1px solid #ccc;
    font-size: 18px;

    .label {
      flex: 1;
      padding-left: 20px;
    }

    .bg-green {
      text-align: center;
      width: 154px;
      background-color: #38C09E;
      color: #fff;
      height: 57px;
      line-height: 57px;

      &:active {
        opacity: 0.8;
      }
    }
  }

  .fliter-box {
    margin-right: 24rpx;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-left: 40rpx;
      margin-right: 10rpx;
    }

    text {
      font-size: 36rpx;
      font-weight: 700;
      color: rgba(255, 255, 255, 1);
    }
  }

  .search-box {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    background: #FFFFFF;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-left: 39rpx;

    }

    input {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      margin-left: 8rpx;
      color: #000;
    }

    .qrimag {
      width: 52rpx;
      height: 52rpx;
      margin-right: 40rpx;
    }
  }

  .tab-box {
    height: 100rpx;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    justify-content: center;
    padding-left: 72rpx;
    padding-right: 72rpx;

    .item {
      padding-top: 32rpx;
      flex: 1;

      .bubble {

        min-width: 24rpx;
        height: 24rpx;
        background: rgba(212, 48, 48, 1);
        color: white;
        font-size: 20rpx;
        line-height: 24rpx;
        border-radius: 12rpx;
        font-weight: 500;
        text-align: center;
        top: -13rpx;
        right: -20rpx;
        position: absolute;

      }

      .unchecktxt {
        position: relative;
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

      .checktxt {
        position: relative;
        font-size: 30rpx;
        font-weight: 700;
        color: rgba(56, 192, 158, 1);
      }

      .in {
        margin-top: 4rpx;
        width: 48rpx;
        height: 6rpx;
        background-color: rgba(56, 192, 158, 1);
        ;
        border-radius: 3rpx;
      }
    }
  }

  .item-view {
    padding: 24rpx;
    width: 698rpx;
    margin-left: 26rpx;
    margin-top: 32rpx;
    border-radius: 12rpx;
    background: rgba(255, 255, 255, 1);

    .head-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
    }

    .name {
      font-size: 32rpx;
      font-weight: 700;
      margin-right: 8rpx;
    }

    .state {
      padding: 0 8rpx;
      line-height: 30rpx;
      height: 30rpx;
      border-radius: 4rpx;
      border: 2rpx solid rgba(56, 192, 158, 1);
      font-size: 20rpx;
      font-weight: 500;
      color: rgba(56, 192, 158, 1);
    }

    .unstate {
      width: 74rpx;
      line-height: 30rpx;
      height: 30rpx;
      border-radius: 4rpx;
      border: 2rpx solid rgba(212, 48, 48, 1);
      font-size: 20rpx;
      font-weight: 500;
      color: rgba(212, 48, 48, 1);
      text-align: center;
    }


    .phone {
      font-size: 30rpx;
      font-weight: 500;
    }

    .eye {
      width: 32rpx;
      height: 32rpx;
      margin-left: 18rpx;
    }

    .amount {
      flex: 1;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(212, 48, 48, 1);
    }

    .integral {
      flex: 1;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(56, 192, 158, 1);
    }

    .arror-right {
      width: 12rpx;
      height: 24rpx;
    }

    .bluebtn {
      width: 124rpx;
      height: 48rpx;
      text-align: center;
      line-height: 48rpx;
      border-radius: 4rpx;
      border: 2rpx solid rgba(56, 192, 158, 1);
      margin-right: 22rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(56, 192, 158, 1);
    }

    .redbtn {
      width: 124rpx;
      height: 48rpx;
      text-align: center;
      line-height: 48rpx;
      border-radius: 4rpx;
      border: 2rpx solid rgba(212, 48, 48, 1);
      margin-right: 22rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(212, 48, 48, 1);
    }

  }
</style>
